<template>
  选择课程
  <el-select :loading="courseLoading" @change="getCourseCatalogVideoVos" v-model="selectCourseId" filterable placeholder="Select" style="margin: 15px">
    <el-option v-for="course in courseList" :key="course.courseId" :label="course.courseName"
               :value="course.courseId"/>
  </el-select>
  目录名称
  <el-input v-model="searchCatalogName" class="w-50 m-2" placeholder="请输入目录名称" style="width:250px;margin: 0 5px" />
  视频名称
  <el-input v-model="searchVideoName" class="w-50 m-2" placeholder="请输入视频名称" style="width:250px;margin: 0 5px" />

  <el-button @click="getCourseCatalogVideoVos" :loading="searchButtonLoading" style="margin: 0 5px">搜索</el-button>
  <el-button v-loading="createCatalogLoading" type="primary" auto-insert-space @click="newCatalog = true">添加目录
  </el-button>
  <el-button v-loading="createVideoLoading" type="primary" auto-insert-space @click="newVideo = true">添加视频
  </el-button>
  <el-table v-loading="catalogLoading" :data="courseCatalogVideoVos" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <el-table :data="props.row.videoList" style="width: 100%;padding-left: 50px">
          <el-table-column prop="courseVideoName" label="视频名称"/>
          <el-table-column prop="courseVideoCreateDate" :formatter="forMater" label="视频上传时间"/>
          <el-table-column prop="courseVideoLength" label="视频时长(分)"/>
          <el-table-column prop="courseVideoSize" label="视频大小(MB)"/>
          <el-table-column label="视频状态">
            <template #default="scope">
              <el-switch v-model="scope.row.courseVideoStatus"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value=1
                         :inactive-value=0
                         :before-change="beforeChange"
                         @change="videoStatusChange(scope.row.courseVideoId,scope.row.courseVideoStatus)"/>
            </template>
          </el-table-column>

          <el-table-column width="135" align="center" label="操作" fixed="right">
            <template #default="scope">
              <el-button size="small" :loading="videoPlayLoading" @click="onVideoPlay(scope.row.courseVideoName,scope.row.courseVideoPath)">播放</el-button>
              <el-popconfirm title="确认是否删除?" @confirm="deleteVideo(scope.row.courseVideoId,scope.row.courseVideoPath)" confirmButtonText="确认" cancelButtonText="取消">
                <template #reference>
                  <el-button size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="目录名称" prop="courseCatalogName"/>
    <el-table-column label="目录创建时间" :formatter="forMater" prop="courseCatalogCreateDate"/>
    <el-table-column width="135" align="center" label="操作" fixed="right">
      <template #default="scope">
        <el-button size="small" @click="selectCatalogId = scope.row.courseCatalogId;catalogDetail = true;"
                   type="primary">详情
        </el-button>
        <el-popconfirm title="确认是否删除?" @confirm="deleteCatalog(scope.row.courseCatalogId,scope.row.courseId)" confirmButtonText="确认" cancelButtonText="取消">
          <template #reference>
            <el-button size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column prop="courseName" label="目录状态">
      <template #default="scope">
        <el-switch v-model="scope.row.courseCatalogStatus"
                   style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value=1
                   :inactive-value=0 :before-change="beforeChange"
                   @change="updateCatalogStatus(scope.row.courseCatalogStatus, scope.row.courseCatalogId)"/>
      </template>
    </el-table-column>

  </el-table>
  <el-dialog @close="getCourseCatalogVideoVos" v-model="newCatalog" title="添 加 目 录">
    <course-catalog-detail :course-id="selectCourseId" :read-only="false"
                           :create-catalog="true"></course-catalog-detail>
  </el-dialog>

  <el-dialog @close="getCourseCatalogVideoVos" v-model="catalogDetail" title="目 录 信 息">
    <course-catalog-detail :catalog-id="selectCatalogId" :read-only="true"
                           :create-catalog="false"></course-catalog-detail>
  </el-dialog>

  <el-dialog @close="getCourseCatalogVideoVos" @open="getCourseIdAndName" v-model="newVideo" title="上 传 视 频">
    <course-video-detail :catalog-list="courseCatalogVideoVos" :create-video="true" ></course-video-detail>
  </el-dialog>

  <el-dialog v-model="videoPlay" @close="videoClose" title="视 频 播 放">
    <vue3-video-play v-bind="options"></vue3-video-play>
  </el-dialog>
</template>

<script>
import {reactive, ref} from 'vue'
import courseCatalogDetail from './courseCatalogDetail'
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import CourseVideoDetail from "./courseVideoDetail";
import moment from "moment";

export default {
  name: 'courseCatalog',
  components: {CourseVideoDetail, courseCatalogDetail},
  data() {
    return {
      videoPlay:ref(false),
      videoPlayLoading:ref(false),
      searchButtonLoading:ref(false),
      courseLoading:ref(false),
      catalogLoading:ref(false),
      createCatalogLoading: ref(false),
      newCatalog: ref(false),
      catalogDetail: ref(false),
      createVideoLoading: ref(false),
      newVideo: ref(false),
      selectCourseId: null,
      selectCatalogId: 1,
      searchCatalogName: ref(''),
      searchVideoName: ref(''),
      courseList: [],
      courseCatalogVideoVos: reactive([]),

      options:reactive({
        width: '100%', //播放器高度
        height: '100%', //播放器高度
        color: "#409eff", //主题色
        title: '', //视频名称
        src: "", //视频源
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: false,  //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制
        controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
      })
    }
  },
  methods: {
    deleteCatalog(catalogId,courseId){
      //检查目录id是否为空
      if (null == catalogId || catalogId<0) {
        ElMessage.warning('目录id不能为空');
        return;
      }
      //检查课程id是否为空
      if (null == courseId || courseId === '') {
        ElMessage.warning('课程id不能为空');
        return;
      }
      ElMessageBox.confirm('该操作会删除目录下所有视频，是否继续删除？').then(()=>{
        axios.delete(`/api/deleteCatalogById?catalogId=${catalogId}&courseId=${courseId}`).then((response)=>{
          if (response.data.code == 200) {
            ElMessage.success(response.data.msg);
            this.getCourseCatalogVideoVos();
          }else {
            ElMessage.warning(response.data.msg);
          }
        }).catch(function (error){
          console.log(error)
        })
      })
    },
    deleteVideo(videoId,videoPath){
      //检查id是否为空
      if (null == videoId || videoPath<0) {
        ElMessage.warning('视频id不能为空');
        return;
      }
      //检查路径是否为空
      if (null == videoPath || videoPath === '') {
        ElMessage.warning('视频路径不能为空');
        return;
      }

      axios.delete(`/api/deleteCourseVideoById?videoId=${videoId}&url=${videoPath}`).then((response)=>{
        if (response.data.code == 200) {
          ElMessage.success(response.data.msg);
          this.getCourseCatalogVideoVos();
        }else {
          ElMessage.warning(response.data.msg);
        }
      }).catch(function (error){
        console.log(error);
      })

    },
    forMater(date){
      return moment(date).format('yyy-MM-DD hh:mm:ss');
    },
    onVideoPlay(videoName,videoPath){
      //开启加载
      this.videoPlayLoading = true;
      this.options.src = 'http://localhost:80/getFile'+videoPath;
      this.options.title = videoName;
      //设置定时器预加载
      setTimeout(()=>{
        //加载完成
        this.videoPlay = true;
        //关闭加载
        this.videoPlayLoading = false;
      },500)

    },
    videoClose(){
        this.options.src = '';
    },
    videoStatusChange(id,status) {
      console.log('id:'+id);
      console.log('status:'+status)
    },
    getCourseCatalogVideoVos() {
      //检查课程id是否为空
      if (this.selectCourseId == null) {
        ElMessage.warning('课程id不能为空');
      } else {
        //开启下拉选项框加载
        this.courseLoading = true;
        //开启表单
        this.catalogLoading = true;
        //开启按钮加载
        this.createCatalogLoading = true;
        this.createVideoLoading = true;
        //获取目录、视频信息
        axios.get(`/api/selectCourseCatalogVideoVO?courseId=${this.selectCourseId}&catalogName=${this.searchCatalogName}&videoName=${this.searchVideoName}`).then((response) => {
          if (response.data.code == 200) {
            this.courseCatalogVideoVos = response.data.data;
          } else {
            ElMessage.warning(response.data.msg);
          }
        }).catch(function (error) {
          console.log(error)
        }).finally(()=>{
          //关闭加载
          this.courseLoading = false;
          this.catalogLoading = false;
          this.createCatalogLoading = false;
          this.createVideoLoading = false;
        })
      }
    },
    getCourseIdAndName() {
      //开启加载
      this.courseLoading  =true;
      //获取课程名称、id
      axios.get('/api/selectCourseIdAndName').then((response) => {
        if (response.data.code == 200) {
          this.courseList = response.data.data;
          if (this.courseList.length > 0) {
            //检查当前是否存在选择项
            if (null == this.selectCourseId || this.selectCourseId < 0) {
              //检查当前选择
              this.selectCourseId = this.courseList[0].courseId;
            }

            //获取目录信息你
            this.getCourseCatalogVideoVos();
          } else {
            this.selectCourseId = null;
          }
        } else {
          ElMessage.warning(response.data.msg);
        }
      }).catch(function (error) {
        console.log(error)
      }).finally(()=>{
        //关闭加载
        this.courseLoading = false;
      })
    },
    beforeChange() {
      return new Promise((resolve) => {
        ElMessageBox.confirm('确认修改目录状态吗').then(() => {
          return resolve(true)
        }).catch(() => {
          return resolve(false)
        })
      })
    },
    updateCatalogStatus(status, catalogId) {
      //检查id是否为空
      if (null == catalogId) {
        ElMessage.warning('目录id不能为空');
      } else if (null == status || status < 0 || status > 1) {
        ElMessage.warning('目录状态异常');
      } else {
        let formData = new FormData();
        formData.append("catalogId", catalogId);
        formData.append("status", status);
        axios.put('/api/updateCourseCatalogStatusById', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((response) => {
          if (response.data.code == 200) {
            ElMessage.success(response.data.msg);
          } else {
            ElMessage.warning(response.data.msg);
          }
          this.getCourseCatalogVideoVos();
        }).catch(function (error) {
          console.log(error);
        })

      }
    }
  },
  created() {
    this.getCourseIdAndName();
  }
}
</script>